{% extends "layout.html" %}

{% block title %}Transfer{% endblock %}
{% block h1 %}Transfer{% endblock %}
{% block page_id %}transfer{% endblock %}

{% block js %}

  <script src="/media/vendor/raphael-min.js" type="text/javascript" charset="utf-8"></script>
  <script src="/media/vendor/g.raphael-min.js" type="text/javascript" charset="utf-8"></script>
  <script src="/media/vendor/g.pie.js" type="text/javascript" charset="utf-8"></script>
  <link rel="stylesheet" href="/media/css/styles.css">
  <script type="text/javascript">
  	$(document).ready(function()
	      {
	  	
	    	$.getJSON("http://localhost:9200/demo/_search?pretty=true", 
	    			{  "fields" : ["doc_name", "file.title", "file.content_type", "file.date", "file.author"], "query" : { "matchAll" : {} }, "facets" : { "tags" : { "terms" : {"field" : "file.content_type","order" : "count","size" : 1000,"all_terms" : true } }}}, 
	    			function(json) {
	    		   
	    		   var pieData = [];
	    		   var pieLegend = [];
	    		   
	    		   var facetsLen=json.facets.tags.terms.length;
	    		   
		    		for ( var i=0, len=facetsLen; i<len; ++i ){
		    			
			    			pieLegend.push('%%.%% - ' + json.facets.tags.terms[i].term);
			    			pieData.push(json.facets.tags.terms[i].count);

		    		}
		    		
		    		pieLegend.push('%%.%% - other');
		    		pieData.push(json.facets.tags.other);
		    		
		    	/* Title settings */		
		        	title = "File breakdown of random directory - " + json.hits.total + " total files";
		        	titleXpos = 390;
		        	titleYpos = 25;

		        /* Pie Data */
		        	pieRadius = 130;
		        	pieXpos = 150;
		        	pieYpos = 180;
		        	pieLegendPos = "east";	
		        	
		        	var r = Raphael("canvas");
		            
		            r.g.text(titleXpos, titleYpos, title).attr({"font-size": 20});
		            
		            var pie = r.g.piechart(pieXpos, pieYpos, pieRadius, pieData, {legend: pieLegend, legendpos: pieLegendPos});
		            pie.hover(function () {
		                this.sector.stop();
		                this.sector.scale(1.1, 1.1, this.cx, this.cy);
		                if (this.label) {
		                    this.label[0].stop();
		                    this.label[0].scale(1.5);
		                    this.label[1].attr({"font-weight": 800});
		                }
		            }, function () {
		                this.sector.animate({scale: [1, 1, this.cx, this.cy]}, 500, "bounce");
		                if (this.label) {
		                    this.label[0].animate({scale: 1}, 500, "bounce");
		                    this.label[1].attr({"font-weight": 400});
		                }
		            });

	    		 })
	    		 .error(function() { alert("Doh! There was a problem getting the json data.  What's up with that?"); });
	        
	      });
  </script>
{% endblock %}

{% block content %}
  
  <p>Hello world! Datetime:</p>
  <p>{{ foo }}</p>
  <div id="canvas"></div> 

{% endblock %}
